<template>
  <div class="statistics_record">
    <div class="statistics_search">
      <div class="search_box">
        <span>账号ID</span>
        <el-input
          style="width: 180px;"
          v-model="featchData.accountid"
          @input="handInput(featchData.accountid)"
          placeholder="请输入账号ID"
        ></el-input>
      </div>
      <div class="search_box">
        <el-select
          style="width: 180px;"
          filterable
          v-model="featchData.gameGroupId"
          placeholder="请选择游戏分组"
        >
          <el-option
            v-for="item in groupsOption"
            :key="item.id"
            :label="item.name + formatId(item.id)"
            :value="item.id"
          >
            <span style="float: left">{{ item.label + formatId(item.id) }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 180px;"
          filterable
          v-model="featchData.gameServerId"
          placeholder="请选择游戏分区"
        >
          <el-option
            v-for="item in gameServerOption"
            :key="item.id"
            :label="item.name + formatId(item.id)"
            :value="item.id"
          >
            <span style="float: left">{{ item.label + formatId(item.id) }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <span>充值金额</span>
        <el-input
          style="width: 110px;"
          v-model="featchData.startOrderMoney"
          placeholder="最低金额"
        ></el-input>
        -
        <el-input
          style="width: 110px;"
          v-model="featchData.endOrderMoney"
          placeholder="最高金额"
        ></el-input>
      </div>
      <div class="search_box">
        <el-radio-group v-model="timeType">
          <el-radio-button
            v-for="item in timeOptions"
            :key="item.id"
            :label="item.id"
            >{{ item.name }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="search_box">
        <span>激活绑定时间</span>
        <el-date-picker
          v-model="dateTime1"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <span>玩家记录时间</span>
        <el-date-picker
          v-model="dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateTimeChange"
        >
        </el-date-picker>
      </div>
      <div class="search_box" >
        <el-input
          v-model="featchData.keyword"
          style="width: 180px;"
          :placeholder="'请输入'+childRoleName+'名称或ID'"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="seach()">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
    </div>
    <div class="statistics_content">
      <div class="total_data">
        <span class="data_label">本页合计 ：</span>
        <!-- <span class="custom_text">充值订单退款总额</span> -->
        <!-- <span class="num_data" style="color: #56A500;">{{ totleordermoney }}</span> -->
        <span class="custom_text">充值金额</span>
        <span class="num_data" style="color: #CF0D17;">{{ totleordermoney }}</span>
        <span class="custom_text">元。</span>
      </div>
      <page-table-new
        :tableData="tableData"
        :featchData="featchData"
        :total="total"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
        ref="pageTable"
        :tableColumns="tableColumns || []"
      >
      <!-- 充值账号 -->
      <template #accountname="scope">
        <div>
            <span>{{ payuserFormat(scope.row.accountname) }}</span>
        </div>
      </template>
      <!-- 激活绑定时间 -->
      <template #bindat="scope">
        <div>
          <span v-if="scope.row.bindat">{{ dateFormat(scope.row.bindat) }}</span>
          <span v-else> - </span>
        </div>
      </template>
      <!-- 玩家记录时间 -->
      <template #opat="scope">
        <div>
          <span v-if="scope.row.opat">{{ dateFormat(scope.row.opat) }}</span>
          <span v-else> - </span>
        </div>
      </template>
      
      </page-table-new>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { TIME_LIST, ACCOUNTNUM_COLUMNS_LIST } from "../const";
import { getGameGroupList,getGameServerList } from "@/api/mubao";
import { formatDate } from "@/utils/validate";
import { getAccountNum } from "@/api/overview";
import { getCookie, } from "@/utils/auth";
// import { deThousands } from "@/utils"
export default {
  name: 'statisticsAccountnum',
  components: { pageTableNew },
  data() {
    return {
      timeType: 1, //1: 今日 2昨日：近7日 1: 近1个月 3：近3个月
      groupsOption: [], //游戏分组
      gameServerOption:[], //游戏分区
      roleType: getCookie("roleType"),
      childRoleName:'',
      dateTime: [],
      dateTime1: [],
      timeOptions: TIME_LIST,
      tableData: [],
      total: 0,
      tableColumns: ACCOUNTNUM_COLUMNS_LIST,
      featchData: {
        pageSize: 20,
        pageStart: 1,
        accountid: '',        
        gameGroupId:'',
        gameServerId:'',
        startOrderMoney:'',
        endOrderMoney:'',
        query:'',
      },
      totleordermoney:'',
    };
  },
  created() {
    this.getGameGroupList();
    this.getGameServerList();
    this.childRoleName = this.$store.state.user.childRoleName;
    this.dateTime = [
      formatDate(new Date(),'yyyy-MM-dd'),
      formatDate(new Date(),'yyyy-MM-dd'),
    ]
    this.tableColumns.forEach(item=>{
      if(item.key === 'name'){
        item.label = this.childRoleName;
      }
    })
  },
  mounted() {
    this.getAccountNum();  // 
  },
  watch:{
    timeType:function(val,old){
      var nowDate = new Date();
      switch(val){
        case 1:
          break;
        case 2:
          nowDate =  new Date(new Date().getTime() - 24*60*60*1000);
          break;
        case 3:
          nowDate =  new Date(new Date().getTime() - 24*60*60*1000*7);
          break;
      }
      let d = nowDate.getDate();
      let M = nowDate.getMonth() + 1;
      let y = nowDate.getFullYear();
      if(val === 4){
        M = M - 1;
        this.dateTime = [
          formatDate(new Date(new Date(y+'-'+M+'-'+d).getTime() + 86400000),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }else if(val === 5){
        M = M - 3;
        this.dateTime = [
          formatDate(new Date(new Date(y+'-'+M+'-'+d).getTime() + 86400000),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }else{
        this.dateTime = [
          formatDate(new Date(y+'-'+M+'-'+d),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }
      if(val === 2){
        this.dateTime[1] = this.dateTime[0];
      }
      this.featchData.pageStart = 1;
      if(val){
        this.getAccountNum();  
      }
    }
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd')
        }
      }
    },
    formatId(){
      return function(id){
        if(id){
          return '('+id+')';
        }
        return '';
      }
    },
    payuserFormat(){
      return function(payuser){
        if(payuser.length < 4){
          return "****"
        }
        return payuser.substr(0,2)+"***"+payuser.substr(payuser.length-2,2)
      }
    }
  },
  methods: {
    dateTimeChange(){
      this.timeType = '';
    },
    handInput(data){
      // this.$set(this.agencyByPro,'value',data.replace(/[^0-9]/g,''));
      this.featchData.accountid = data.replace(/[^0-9,]/g,'');
    },
    // deThousands(){
    //   deThousands(this.featchData.accountid);
    // },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.getAccountNum();
    },
    handleSortChange() {},
    getGameGroupList(){
      getGameGroupList().then((res)=>{
        let arr = [
          {
            id: '',
            name: "游戏分组：全部",
            label: "全部"
          }
        ];
        res.data.forEach(x => {
          arr.push({
            id: x.id,
            name: `游戏分组：${x.groupname}`,
            label: x.groupname
          });
        });
        this.groupsOption = arr;
      })
    },
    getGameServerList(){
      getGameServerList().then((res)=>{
        let arr = [
          {
            id: '',
            name: "游戏分区：全部",
            label: "全部"
          }
        ];
        res.data.forEach(x => {
          arr.push({
            id: x.id,
            name: `游戏分区：${x.subname}`,
            label: x.subname
          });
        });
        this.gameServerOption = arr;
      })
    },
    getAccountNum(){
      let data = {
        startAt: this.dateTime?new Date(formatDate(new Date(this.dateTime[0]),'yyyy-MM-dd')+' 00:00:00').getTime():'',
        endAt: this.dateTime?new Date(formatDate(new Date(this.dateTime[1]),'yyyy-MM-dd')+' 23:59:59').getTime():'',
        bindStartAt: this.dateTime1?new Date(formatDate(new Date(this.dateTime1[0]),'yyyy-MM-dd')+' 23:59:59').getTime():'',
        bindEndAt: this.dateTime1?new Date(formatDate(new Date(this.dateTime1[1]),'yyyy-MM-dd')+' 23:59:59').getTime():'',
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        gameGroupId: this.featchData.gameGroupId,
        gameServerId: this.featchData.gameServerId,
        startOrderMoney: this.featchData.startOrderMoney,
        endOrderMoney: this.featchData.endOrderMoney,
        query: this.featchData.query,
        accountId: this.featchData.accountid,
      }
      getAccountNum(data).then((res)=>{
       if(res.code === 0){
          this.tableData = res.data.values;
          this.total = res.data.total;
          this.totleordermoney = res.data.totleordermoney;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        accountid: '',        
        gameGroupId:'',
        gameServerId:'',
        startOrderMoney:'',
        endOrderMoney:'',
        query:'',
      };
      this.dateTime1 = [];
      this.$nextTick(()=>{
        if(this.timeType === 1){
          this.getAccountNum();
        }
        this.timeType = 1;
      })
    },
    seach(){
      this.featchData.pageStart = 1;
      this.getAccountNum();  // 推广商推广员收入统计

    }
  }
};
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.statistics_record {
  margin-bottom: 20px;
  .statistics_search {
    line-height: 36px;
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      font-size: 14px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .total_data {
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 22px;
    height: 22px;
    box-sizing: border-box;
    .data_label {
      font-family: PingFangSC-Semibold;
      color: #404040;
      font-weight: 600;
    }
    .custom_text {
      font-family: PingFangSC-Regular;
      color: #404040;
    }
    .num_data {
      font-weight: 600;
    }
  }
  .statistics_content {
    background: #fff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
  }
}
</style>
